<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VSelect v-model="form.supplier_name" placeholder="供应商" type="supplierName" allow-create style="min-width: 200px" multiple
          collapse-tags clearable filterable />
        <VGroup>
          <div class="v-group-item">下单日期</div>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
      </template>
      <template #toolbar_btns></template>
    </VTable>
  </VPage>
</template>
  
<script setup lang="jsx" name="Account">
import api from './api'

const tableRef = ref()
// 查询
const query = () => {
  tableRef?.value.query()
}

// 列表配置
const tableOptions = reactive({
  showHeaderOverflow: false,
  showOverflow: false,
  formConfig: {
    data: {
      dateRange: {type: 'create_time', value: [], range: true}
    }
  },
  columns: [
    { title: '供应商', field: 'supplier_name', minWidth: 140, slots: {
      default: ({row}) => <VText value={row.supplier_name} line={2} />
    } },
    { title: '采购单数量', field: 'purchase_order_num', minWidth: 80 },
    { title: '下单sku个数', field: 'purchase_sku_num', minWidth: 80 },
    { title: '下单总数量', field: 'purchase_total_num', minWidth: 80 },
    { title: '下单总金额', field: 'purchase_total_price', minWidth: 80 },
    { title: '未入库数量', field: 'not_inbound_num', minWidth: 80 },
    { title: '未入库金额', field: 'not_payment_price', minWidth: 80 },
    { title: '未付款金额', field: 'not_inbound_price', minWidth: 80 },
    { title: '已入库数量', field: 'inbound_num', minWidth: 80 },
    { title: '已入库金额', field: 'inbound_price', minWidth: 80 },
    { title: '已付款金额', field: 'payment_price', minWidth: 80 },
    { title: '异常数量', field: 'abnormal_num', minWidth: 80 },
    { title: '异常金额', field: 'abnormal_price', minWidth: 80 },
    { title: '未处理异常数量', field: 'not_process_abnormal_num', minWidth: 80 },
    { title: '未处理异常金额', field: 'not_process_abnormal_price', minWidth: 80 },
    { title: '已处理异常数量', field: 'process_abnormal_num', minWidth: 80 },
    { title: '已处理异常金额', field: 'process_abnormal_price', minWidth: 80 },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page })
    }
  }
})
</script>
  